<template>
  <div class="page-card verify-data">
    <h-query :showKey="[]" :query="query" @search="search">
      <!-- <h-tooltip slot="btn" title="1.筛选条件需要吗;2.自定义数据详情报错" /> -->
      <div class="a-button-right" >
        <a-space>
          <a-button type="primary" @click="add">追加手工数据</a-button>
          <a-button @click="showModal" type="primary" style="">情感色彩 <h-tooltip slot="btn" title="这个有接口吗" /></a-button>
        </a-space>
      </div>

    </h-query>
    <h-ccard shadow>
      <a-row :gutter="20">
        <a-col :span="4">
          <div class="verify-list">
            <h1 class="verify-label">历史指令: </h1>
            <div @click="select(item, item.id)" :class="['verify-each', active == item.id ? 'active' : '']" v-for="(item, i) in history" :key="i">
              <p>{{ item.createTime }}</p>
              <p>{{ item.instructions }}</p>
              <!-- <p>
                <a-tag color="green" v-if="item.status == 1">已完成</a-tag>
                <a-tag v-else>待接收</a-tag>
              </p> -->
              <p v-if="item.status == 1">已完成</p>
              <p v-else>待接收</p>
            </div>
          </div>
        </a-col>
        <a-col :span="20">
          <div>
            <h1 class="verify-label">数据 （{{ title }}）</h1>
          </div>
          <h-table
            ref="htableView"
            @init="getList"
            :config="config">
            <span slot="score" slot-scope="{text, record}">
              <a-select @change="getScore($event, record)" v-model="record.score" style="width: 88px" placeholder="请选择">
                <a-select-option :value="0">满意</a-select-option>
                <a-select-option :value="1">一般</a-select-option>
                <a-select-option :value="2">不满意</a-select-option>
              </a-select>
            </span>
            <span slot="content" slot-scope="{text}">
              <a-popover placement="topLeft">
                <template slot="content">
                  <div style="max-width: 400px">
                    {{ text }}
                  </div>
                </template>
                {{ text }}
              </a-popover>
            </span>
            <span slot="status" slot-scope="{text}">
              <a-tag v-if="text == 0">待审核</a-tag>
              <a-tag color="green" v-else-if="text == 1">已通过</a-tag>
              <a-tag color="red" v-else-if="text == 2">已拒绝</a-tag>
            </span>
            <span slot="action" slot-scope="{text, record}">
              <a @click="edit(record)" v-if="record.status != 1">修改数据</a>
              <a style="margin-left: 12px" @click="pow(record, 1)" v-if="record.status != 1">通过</a>
              <a style="margin-left: 12px" class="red" @click="pow(record, 2)" v-if="record.status != 2">拒绝</a>
            </span>
          </h-table>
        </a-col>
      </a-row>
    </h-ccard>

    <!-- 指令名称 -->
    <h-modal class="event-modal" v-model="dataShow" :title="selectData.title" @submit="submit">

      <a-form-model :model="dataForm" size="large">
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-model-item label="第三方公司参考值">
              <div style="height: 300px">
                <Pie />
              </div>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设置">
            </a-form-model-item>
            <a-form-model-item label="正向">
              <a-input size="large" v-model="dataForm.front" addonAfter="%" placeholder="请输入正向值"></a-input>
            </a-form-model-item>
            <a-form-model-item label="中性">
              <a-input size="large" value="50%" readOnly addonAfter="%"></a-input>
            </a-form-model-item>
            <a-form-model-item label="负向">
              <a-input size="large" v-model="dataForm.back" addonAfter="%" placeholder="请输入负向值"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-button class="selectall" type="primary">批量入选</a-button>
            <a-form-model-item label="数据详情">
              <h-table
                ref="htable"
                @init="getcomponeyList"
                :config="componeyConfig"
                :showHeadBgNone="false"
                :zebraStripes="false"
                showRowSelection
                @select="select">

                <span slot="action">
                  <a-button type="primary" size="small">入选</a-button>
                </span>
              </h-table>
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>
    </h-modal>

    <createVerifyData ref="createVerifyData" :id="id" v-model="showData" />
  </div>
</template>

<script>
import { queryPushDataPageLists, componeyList, getReviewInstructions, addPublicOpinionData, updatePushData } from '@/api/serve';
import Pie from './charts/Pie/Index';
import createVerifyData from './action/createVerifyData';

export default {
  components: {
    Pie,
    createVerifyData
  },
  data() {
    return {
      showData: false,
      dataShow: false,
      dataForm: {
        front: '80',
        back: '10'
      },
      id: '',
      active: 0,
      selectData: {},
      query: [
        {
          key: 'title',
          type: 'input',
          label: '搜索指令'
        },
        {
          key: ['startTime', 'endTime'],
          type: 'dateTime',
          label: '指令下发时间'
        }
      ],
      history: [
        {
          title: 'XXX指令名称',
          time: '2022-02-02 20:00',
          statusText: '待接收'
        }
      ],
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        scroll: {
          x: 750
        },
        columns: [
          {
            align: 'center',
            title: '第三方公司',
            dataIndex: 'companyName',
            width: 160
          },
          {
            align: 'center',
            title: '数据标题',
            dataIndex: 'title',
            width: 200
          },
          {
            align: 'center',
            title: '数据内容',
            dataIndex: 'content',
            width: 300,
            ellipsis: true,
            scopedSlots: { customRender: 'content' }
          },
          {
            align: 'center',
            title: '推送时间',
            dataIndex: 'createTime',
            width: 160
          },
          {
            align: 'center',
            title: '打分',
            dataIndex: 'score',
            width: 120,
            scopedSlots: { customRender: 'score' }
          },
          {
            align: 'center',
            title: '状态',
            width: 100,
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' }
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            width: 200,
            fixed: 'right'
          }
        ],
        pagination: {
          total: 100
        }
      },
      componeyConfig: {
        rowKey: 'id',
        size: 'small',
        dataSource: [],
        columns: [
          // {
          //   align: 'center',
          //   title: '序号',
          //   dataIndex: 'index',
          //   scopedSlots: { customRender: 'index' }
          // },
          {
            align: 'center',
            title: '第三方公司',
            dataIndex: 'title',
            width: 400
          },
          {
            align: 'center',
            title: '主贴',
            dataIndex: 'tie'
          },
          {
            align: 'center',
            title: '评论',
            dataIndex: 'recoment'
          },
          {
            align: 'center',
            title: '参考分值',
            dataIndex: 'acceptNum'
          },

          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100
        }
      },
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      title: ''
    };
  },
  async created() {
    this.id = this.$route.query.id; // '5933400163724644680' ||
    this.title = this.$route.query.title;
    await this.getReviewInstructions();
    this.getList();
    this.getcomponeyList();
  },
  methods: {
    search(params) {
      Object.assign(this.queryParams, params);
      // await this.getReviewInstructions();
      // this.getList();
      // this.getcomponeyList();
      this.$refs.htableView.refresh();
    },
    select(item, id) {
      this.active = id;
      this.selectData = item;
      this.$refs.htableView.refresh();
    },
    getList(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      queryPushDataPageLists({ ...this.queryParams, reviewId: this.active }).then(res => {
        this.config.dataSource = res.data.records;
        this.config.pagination.total = res.data.total;
      });
    },
    getScore(e, { id, status }) {
      // console.log(e, data);
      this.updatePushData({
        id,
        score: e,
        status
      });
    },
    pow({ id, score }, status) {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: `确定要${status == 1 ? '通过' : '拒绝'}吗？`,
        onOk() {
          that.updatePushData({
            id,
            score,
            status
          });
        }
      });
    },
    refuse() {

    },
    add() {
      this.$refs.createVerifyData.add();
      this.showData = true;
    },
    edit(record) {
      this.$refs.createVerifyData.edit(record);
      this.showData = true;
    },
    submit() {
      this.addPublicOpinionData();
    },
    showModal() {
      this.dataShow = true;
    },
    getcomponeyList(params) {
      componeyList().then(res => {
        this.componeyConfig.dataSource = res.data.list;
      });
    },
    async getReviewInstructions() {
      const res = await getReviewInstructions({
        eventId: this.id,
        ...this.queryParams
      });
      this.history = res.data;
      this.active = this.history[0].id;
    },
    addPublicOpinionData() {
      addPublicOpinionData(this.dataForm).then(res => {
        this.$message.success('创建成功');
      });
    },
    updatePushData(params) {
      updatePushData(params).then(res => {
        this.$message.success('已完成');
        this.$refs.htableView.refresh(true);
      });
    }
  }
};
</script>

<style scoped lang="less">
  .verify-data {
    .verify--btn {
      position: absolute;
      right: 0;
      top: 0;
    }
    .verify-list {
      max-height: 620px;
      overflow-y: scroll;
      overflow-x: hidden;
      margin-left: -34px;
      &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: #1F3B8A;
        }
      &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #EDEDED;
        }

      .verify-label {
        padding-left: 50px;
      }
    }
    .verify-label {
      font-size: 16px;
      font-weight: 400;
      color: #333;
      // padding-left: 50px;
      margin-bottom: 16px;
    }
    .verify-each {
      padding: 16px 12px;
      padding-left: 50px;
      box-sizing: border-box;
      // border-radius: 4px;
      position: relative;
      width: 100%;
      cursor: pointer;
      &:hover {
        background: rgba(31, 59, 138, 0.05);
      }
      &.active {
        background: rgba(31, 59, 138, 0.1);
        &::after {
          // content: ' ';
          // position: absolute;
          // right: 0;
          // // border-radius: 10px;
          // background: #1F3B8A;
          // width: 4px;
          // height: 100%;
          // top: 0;
        }
      }
      p {
        margin: 0;
      }
      >p:first-child {
        font-size: 12px;
        font-weight: 500;
        color: #91929E;
        margin-bottom: 2px;
      }
      >p:nth-child(2) {
        font-size: 16px;
        font-weight: 400;
        color: #0A1629;
        margin-bottom: 4px;
      }
      >p:nth-child(3) {
        font-size: 15px;
        font-weight: 400;
        color: #666;
      }
    }
  }
  .selectall {
    position: absolute;
    right: 12px;
    top: 0;
    z-index: 222;
  }
</style>
